<template>
    <view class="s-c-t-f">
        <view class="s-c-t-box">
            <view>{{ saleCompTxt }}</view>
            <view class="c-d-t" @click="showDrop('show')"
                >{{ curDrop.name
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >
        </view>
        <div class="echart-box">
            <echarts :option="option" style="height: 100%"></echarts>
        </div>
        <!-- 仓库筛选 -->
        <view
            class="good-mask mask-top"
            :style="!isExpand ? 'margin-left: 72px;' : ''"
            :class="state === 0 ? 'none' : state === 1 ? 'show' : ''"
            @click="showDrop"
        >
            <view class="cate-content">
                <scroll-view scroll-y class="cate-list c-l-p">
                    <view v-for="(item, index) in dropDownList" :key="index">
                        <view class="cate-item" @click="change(item)"
                            >{{ item.name }}
                            <text
                                class="icon-font selected-icon"
                                v-show="item.id == curDrop.id"
                                >&#xe636;</text
                            >
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
import lang from "../../../js/conf/Lang.js";
import echarts from "@/components/echarts/echarts.vue";
import { mapGetters } from "vuex";
export default {
    computed: {
        ...mapGetters(["isExpand"]),
    },
    components: {
        echarts,
    },
    data() {
        return {
            state: 0,
            chartSourceData: {},
            saleCompTxt: lang.report.saleCompTxt,
            dropDownList: [
                {
                    name: lang.saleReport.saleTxt,
                    id: 1,
                },
                {
                    name: "进货额",
                    id: 2,
                },
                {
                    name: "货款额",
                    id: 3,
                },
                {
                    name: "卖出量",
                    id: 4,
                },
                {
                    name: "买进量",
                    id: 5,
                },
                {
                    name: "拆盒量",
                    id: 6,
                },
            ],

            curDrop: {
                name: lang.saleReport.saleTxt,
                id: 1,
            },

            option: {
                title: {
                    // text: 'ECharts 入门示例'
                    // text: ''
                },
                tooltip: {},
                xAxis: {
                    data: [],
                },
                yAxis: {},
                series: [],
            },
        };
    },
    methods: {
        init(data) {
            this.chartSourceData = data;
            this.setData();
        },

        setData() {
            let len = this.chartSourceData.length;
            let series = [];
            let obj = {};
            obj.name = this.curDrop.name;
            obj.type = "bar";
            obj.data = [];
            obj.color = "#3388ff";
            series.push(obj);
            this.option.title.text = obj.name + "对比";
            let xAxis = {};
            xAxis.data = [];
            for (let i = 0; i < len; i++) {
                let temp = this.chartSourceData[i];
                if (this.curDrop.id == 1) {
                    series[0].data.push(temp.amount_re);
                    xAxis.data.push(temp.time);
                }
                if (this.curDrop.id == 2) {
                    series[0].data.push(temp.amount_th_re);
                    xAxis.data.push(temp.time);
                }
                if (this.curDrop.id == 3) {
                    series[0].data.push(temp.profit_re);
                    xAxis.data.push(temp.time);
                }
                if (this.curDrop.id == 4) {
                    series[0].data.push(temp.num_od_re);
                    xAxis.data.push(temp.time);
                }
                if (this.curDrop.id == 5) {
                    series[0].data.push(temp.number_re);
                    xAxis.data.push(temp.time);
                }
                if (this.curDrop.id == 6) {
                    series[0].data.push(temp.number_re);
                    xAxis.data.push(temp.time);
                }
            }
            this.option.series = series;
            this.option.xAxis = xAxis;
        },

        showDrop(type) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.state = 2;
            setTimeout(() => {
                this.state = state;
            }, timer);
        },

        change(item) {
            if (item.id == this.curDrop.id) return;
            this.curDrop = item;
            this.setData();
        },
    },
    mounted() {},
};
</script>

<style lang="scss">
.s-c-t-f {
    width: 485px;
    min-width: 485px;
    height: 100%;
    padding: 10px;
    border-right: 1px solid #ededed;
    .s-c-t-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
        .c-d-t {
            cursor: pointer;
        }
    }
    .echart-box {
        height: calc(100% - 45px);
        padding-bottom: 30upx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;

        .canvasView {
            height: 600px;
            width: 400px;
        }

        .navigate {
            color: #007aff;
        }

        .canvas-bar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .update-btn {
            margin-right: 30upx;
        }
    }

    .mask-top {
        top: 290px;
        margin-left: 240px;
        width: 505px;
        min-width: 505px;
        .cate-content {
            height: 220px;
            .cate-list {
                height: 220px;
                .cate-item {
                    padding: 5px 10px;
                    cursor: pointer;
                    position: relative;
                    .selected-icon {
                        position: absolute;
                        color: #3388ff;
                        right: 5px;
                        top: 0;
                        font-size: 24px;
                    }
                }
                .cate-item:hover {
                    background-color: #eee;
                }
            }
        }
    }
}
</style>
